<template>
  <el-menu
    :default-openeds="['1', '3']"
    style="height: 100%; overflow-x: hidden"
    background-color="rgb(48,65,86)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="false"
    :collapse="isCollapse"
    router
    @select="handleSelect"
  >
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img
        src="../assets/logo.png"
        alt=""
        style="width: 20px; position: relative; top: 5px; margin-right: 5px"
      />
      <b style="color: white" v-show="logoTextShow">空调售后系统</b>
    </div>

    <el-menu-item index="/home">
      <template slot="title">
        <i class="el-icon-house"></i>
        <span slot="title">主页</span>
      </template>
    </el-menu-item>
    <el-submenu index="2" v-show="this.roleName=='管理员'?true:false">
      <template slot="title" >
        <i class="el-icon-menu"></i>
        <span slot="title">系统管理</span>
      </template>
      <el-menu-item index="/user" >
        <i class="el-icon-s-custom"></i>
        <span slot="title">客户管理</span>
      </el-menu-item>
      <el-menu-item index="/file">
        <i class="el-icon-document"></i>
        <span slot="title">头像管理</span>
      </el-menu-item>
 

     
    </el-submenu>

    <el-submenu index="3" v-show="this.roleName=='客户'?true:false">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">客户服务</span>
      </template>

      <el-menu-item index="/selfcheck">
        <i class="el-icon-document"></i>
        <span slot="title">故障自检</span>
      </el-menu-item>
    </el-submenu>


    <el-submenu index="4" v-show="this.roleName=='管理员'?true:false">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">零件管理</span>
        </template>
        <el-menu-item index="/part">
          <i class="el-icon-s-custom"></i>
          <span slot="title">所有零件</span>
        </el-menu-item>

        <el-menu-item index="/addPart">
          <i class="el-icon-s-custom"></i>
          <span slot="title">新增零件</span>
        </el-menu-item>
      </el-submenu>


      <el-submenu index="5" v-show="this.roleName=='客户'||this.roleName=='管理员'?true:false">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item index="/order" v-show="this.roleName=='管理员'?true:false">
          <i class="el-icon-s-custom"></i>
          <span slot="title">所有订单</span>
        </el-menu-item>
        <el-menu-item index="/myOrder" v-show="this.roleName=='客户'?true:false">
          <i class="el-icon-s-custom" ></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
      </el-submenu>

      <el-submenu index="8" v-show="this.roleName=='管理员'||this.roleName=='维修员'?true:false">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">任务池</span>
        </template>
        <el-menu-item index="/pool">
          <i class="el-icon-s-custom"></i>
          <span slot="title">任务列表</span>
        </el-menu-item>
      </el-submenu>
      
      <el-submenu index="7" v-show="this.roleName=='管理员'||this.roleName=='维修员'?true:false">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">维修任务</span>
        </template>
        <el-menu-item index="/repairTask" v-show="this.roleName=='管理员'?true:false">
          <i class="el-icon-s-custom"></i>
          <span slot="title">所有维修任务</span>
        </el-menu-item>
        <el-menu-item index="/myRepairTask" v-show="this.roleName=='维修员'?true:false">
          <i class="el-icon-s-custom"></i>
          <span slot="title">我的维修任务</span>
        </el-menu-item>
      </el-submenu>


    

        <el-submenu index="9" v-show="this.roleName=='管理员'?true:false">
        <template slot="title">
          <i class="el-icon-menu" ></i>
          <span slot="title">角色管理</span>
        </template>
        <el-menu-item index="/userAndRole">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户角色配置</span>
        </el-menu-item>
        <el-menu-item index="/allRole">
          <i class="el-icon-s-custom"></i>
          <span slot="title">所有角色</span>
        </el-menu-item>
      </el-submenu>


  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  props: {
    isCollapse: Boolean,
    logoTextShow: Boolean,
  },
  data(){
    return{
      roleName:JSON.parse(localStorage.getItem("user")).roleName
    }
  },
  methods: {
    handleSelect(index) {}
  },
};
</script>

<style scoped></style>
